<template>
  <div class="bindDetails-box">
    <div class="header-box">招标项目流程</div>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      stretch
      class="custom-tabs"
    >
      <el-tab-pane name="first">
        <span slot="label">
          <div class="first-box">招标</div>
        </span>
        <div class="head-box">
          <!--招标-->
          <el-tabs v-model="bindActiveName" @tab-click="handleClick">
            <el-tab-pane label="招标项目" name="bind_project">
              <div>
                <div class="updateBind">
                  <div class="title">
                    <h3 style="font-weight: bold">招标项目编辑</h3>

                    <el-row class="display-box">
                      <el-col :span="4" class="headcol">招标项目编号</el-col>
                      <el-col :span="8" class="headcols">
                        <el-input
                          v-model="bind.bindCode"
                          readonly
                          style="margin-left: 5px"
                        ></el-input>
                      </el-col>

                      <el-col :span="4" class="headcol">招标项目名称</el-col>
                      <el-col :span="8" class="headcols">
                        <el-input
                          v-model="bind.bindName"
                          readonly
                          style="margin-left: 5px"
                        ></el-input>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="headcol">招标方式</el-col>
                      <el-col :span="8" class="headcols">
                        <div>
                          <dict-tag
                            class="dict-box"
                            :options="dict.type.pur_methods"
                            :value="bind.bindMethod"
                          />
                        </div>
                      </el-col>
                      <el-col :span="4" class="headcol">是否必招</el-col>
                      <el-col :span="8" class="headcols">
                        <el-radio
                          v-model="bind.isMust"
                          label="1"
                          style="margin-left: 20px"
                          >依法必招</el-radio
                        >
                        <el-radio v-model="bind.isMust" label="2"
                          >自主招标</el-radio
                        >
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="headcol">资格审查方式</el-col>
                      <el-col :span="8" class="headcols">
                        <el-radio
                          v-model="bind.examMethod"
                          label="1"
                          style="margin-left: 20px"
                          >资格预审</el-radio
                        >
                        <el-radio v-model="bind.examMethod" label="2"
                          >资格后审</el-radio
                        >
                      </el-col>
                      <el-col :span="4" class="headcol">业务类型</el-col>
                      <el-col :span="8" class="headcols">
                        <dict-tag
                          style="margin-left: 15px"
                          :options="dict.type.business_type"
                          :value="bind.busiType"
                        />
                      </el-col>
                    </el-row>
                    <el-row class="display-box">
                      <el-col :span="4" class="headcol">招标单位</el-col>
                      <el-col :span="8" class="headcols">
                        <el-input
                          v-model="bind.bindUnit"
                          style="margin-left: 5px"
                        ></el-input>
                      </el-col>
                      <el-col :span="4" class="headcol">联系人</el-col>
                      <el-col :span="8" class="headcols">
                        <el-input
                          v-model="bind.bindPerson"
                          style="margin-left: 5px"
                        ></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="display-box">
                      <el-col :span="4" class="headcol">电话</el-col>
                      <el-col :span="8" class="headcols">
                        <el-input
                          v-model="bind.phone"
                          style="margin-left: 5px"
                        ></el-input>
                      </el-col>
                      <el-col :span="4" class="headcol">邮箱</el-col>
                      <el-col :span="8" class="headcols">
                        <el-input
                          v-model="bind.email"
                          style="margin-left: 5px"
                        ></el-input>
                      </el-col>
                    </el-row>

                    <el-row class="display-box">
                      <el-col :span="4" class="headcol">地址</el-col>
                      <el-col :span="20" class="headcols">
                        <el-input v-model="bind.binderAddr"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="display-box">
                      <el-col :span="4" class="headcol">相关附件</el-col>
                      <el-col
                        :span="20"
                        class="headcols"
                        style="position: relative"
                      >
                        <FileUpload
                          :syncedMessage.sync="fileInfo"
                          style="margin-left: 10px"
                          ref="childrenFile"
                        ></FileUpload>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="budGetInfos-box">
                    <div
                      style="
                        font-size: 18px;
                        font-weight: bold;
                        margin-bottom: 20px;
                      "
                    >
                      <em>预算信息</em>
                    </div>
                    <el-table :data="budgetList" border>
                      <el-table-column
                        label="预算编号"
                        align="center"
                        prop="bgId"
                      />
                      <el-table-column
                        label="部门名称"
                        align="center"
                        prop="createPost"
                      />
                      <el-table-column
                        label="预算名称"
                        align="center"
                        prop="bgName"
                        width="170px"
                      />

                      <el-table-column
                        label="总金额"
                        align="center"
                        prop="totalAmount"
                      />

                      <el-table-column
                        label="已使用金额"
                        align="center"
                        prop="useMoney"
                      />
                      <el-table-column
                        label="剩余金额"
                        align="center"
                        prop="surpMoney"
                      />
                    </el-table>
                    <pagination
                      v-show="total > 0"
                      :total="total"
                      :page.sync="budGetqueryParams.pageNum"
                      :limit.sync="budGetqueryParams.pageSize"
                      @pagination="getBudGetList"
                    />
                  </div>

                  <div class="planInfos-box">
                    <div
                      style="
                        font-size: 18px;
                        font-weight: bold;
                        margin-bottom: 20px;
                      "
                    >
                      <em>产品明细</em>
                    </div>
                    <el-table :data="planInfoList" style="width: 100%" border>
                      <el-table-column type="expand">
                        <template slot-scope="props">
                          <el-form
                            label-position="left"
                            inline
                            class="demo-table-expand"
                          >
                            <el-form-item label="税率">
                              <span>{{ props.row.taxRate + "%" }}</span>
                            </el-form-item>
                            <el-form-item label="预算总价">
                              <span>{{ props.row.bdgTotlePrice + "元" }}</span>
                            </el-form-item>
                            <el-form-item label="交付时间">
                              <span>{{ props.row.delvTime }}</span>
                            </el-form-item>
                            <el-form-item label="需求说明">
                              <span>{{ props.row.prodExplain }}</span>
                            </el-form-item>
                            <el-form-item label="采购人">
                              <span>{{ props.row.purchaser }}</span>
                            </el-form-item>
                          </el-form>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="预算编号"
                        align="center"
                        prop="bgId"
                        width="200"
                      />
                      <el-table-column
                        label="产品编号"
                        align="center"
                        prop="prodId"
                        width="200"
                      />
                      <el-table-column
                        label="产品名称"
                        align="center"
                        prop="prodName"
                        width="200"
                      />
                      <el-table-column
                        label="规格"
                        align="center"
                        prop="size"
                        width="150"
                      />
                      <el-table-column
                        label="预算单价"
                        align="center"
                        prop="bdgSinglePrice"
                        width="140"
                      />
                      <el-table-column
                        label="需求数量"
                        align="center"
                        prop="reqNumber"
                      />
                    </el-table>
                    <pagination
                      v-show="planInfoTotal > 0"
                      :total="planInfoTotal"
                      :page.sync="planInfoqueryParams.pageNum"
                      :limit.sync="planInfoqueryParams.pageSize"
                      @pagination="getPlanInfoList"
                    />
                  </div>
                  <div class="submit-box">
                    <el-button
                      type="info"
                      @click="back"
                      style="margin-left: 1000px"
                      >取 消</el-button
                    >
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="招标公告" name="bind_notice"
              ><bindNoticeVue :openMessage.sync="sendBind"></bindNoticeVue
            ></el-tab-pane>
            <el-tab-pane label="招标文件" name="bind-file">
              <bindFile :openMessage.sync="sendBind"></bindFile>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label">
          <div class="second-box">投标</div>
        </span>
        <div class="head-box">
          <!--投标-->
          <div class="tb">
            <getBindFile :openMessage.sync="sendBind"></getBindFile>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="third">
        <span slot="label">
          <div class="third-box">开标</div>
        </span>
        <div>
          <el-tabs v-model="committeeActiveName" @tab-click="handleClick">
            <el-tab-pane label="组件评标委员会" name="committee">
              <committee :openMessage.sync="sendBind"></committee>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane name="fourth">
        <span slot="label">
          <div class="fourth-box">评标</div>
        </span>
        <div class="head-box">
          <!--评标-->
          <evaluation :openMessage.sync="sendBind"></evaluation>
        </div>
      </el-tab-pane>
      <el-tab-pane name="five">
        <span slot="label">
          <div class="five-box">定标</div>
        </span>
        <div class="head-box">
          <!--定标-->
          <calibrate :openMessage.sync="sendBind"></calibrate>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { updateBind } from "@/api/purs/bind";
import { getPlanDetails, deleteFile, getPurCode } from "@/api/purs/purs";
import { budList, listBudget } from "@/api/budget/budget";
import { getPlanInfoListByBindCode } from "@/api/purs/planInfo";
import bindNoticeVue from "@/components/Bind/bindNotice";
import bindFile from "@/components/Bind/bindFiles";
import getBindFile from "@/components/Bind/getBindFile";
import committee from "@/components/Bind/committee";
import evaluation from "@/components/Bind/evaluation";

import calibrate from "@/components/Bind/calibrate";
import {
  addBindFiles,
  delBindFiles,
  listBindFiles,
  delBindFilesByFileName,
} from "@/api/purs/bindFiles";
import axios from "axios";

export default {
  dicts: ["pur_methods", "pur_bind_status", "business_type"],
  components: {
    bindNoticeVue: bindNoticeVue,
    bindFile: bindFile,
    getBindFile: getBindFile,
    committee: committee,
    evaluation: evaluation,
    calibrate: calibrate,
  },
  data() {
    return {
      committeeActiveName: "committee",
      getFileActiveName: "getFile",
      activeName: "first",
      bindActiveName: "bind_project",
      fileInfo: {},
      bindCode: "",
      sendBind: { incry: 1 },
      bind: {},
      budgetList: [],
      planInfoList: [],
      planInfoTotal: 1,
      mapData: [],
      total: 1,
      budGetqueryParams: {
        pageNum: 1,
        pageSize: 10,
        planCode: null,
      },
      planInfoqueryParams: {
        pageNum: 1,
        pageSize: 10,
        planCode: null,
      },
      bindFile: {},
      uploadFlag: true,
      myFileList: [],
    };
  },

  watch: {
    fileInfo: {
      handler(value) {
        if (value.code == 1) {
          this.bindFile.fileName = value.fileName;
          this.bindFile.filePath = value.filePath;
          this.bindFile.type = 1;
          this.bindFile.fileSize = parseFloat(value.fileSize / 1000);
          this.bindFile.creater = sessionStorage.getItem("userName");
          this.bindFile.bindCode = this.bindCode;
          // console.log("bindCode:" + JSON.stringify(this.bindFile));
          addBindFiles(this.bindFile).then((res) => {
            if (res.code == 200) {
              this.uploadFlag = false;
              this.$modal.msgSuccess("上传成功");
            }
          });
        } else if (value.code == 2) {
          //删除文件
          deleteFile(this.bindFile.fileName).then();
          delBindFilesByFileName(this.bindFile.fileName).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("删除成功");
            }
          });
        } else {
          //删除文件
          this.bindFile.fileName = value.name;
          deleteFile(this.bindFile.fileName).then();
          delBindFilesByFileName(this.bindFile.fileName).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("删除成功");
            }
          });
        }
      },
    },
  },
  created() {
    this.bind = this.$route.query.bind;
    this.fileInfo.id = this.bind.bindCode;
    this.bindCode = this.$route.query.bind.bindCode;
    this.bindFile.bindCode = this.bindCode;
    this.sendBind = this.bind;
    let queryObj = {};
    queryObj.bindCode = this.bindCode;
    queryObj.type = 1;
    listBindFiles(queryObj).then((res) => {
      res.rows.forEach((item) => {
        let obj = {};
        obj.url = item.filePath;
        obj.name = item.fileName;
        obj.id = item.fileId;
        obj.code = 3;
        this.myFileList.push(obj);
      });
      this.$refs.childrenFile.test(this.myFileList);
    });
    this.budGetqueryParams.planCode = this.bindCode;
    if (this.bindCode != null) {
      this.getBindDetails();
    }
  },
  methods: {
    //招标
    handleOpenBindClick(tab, event) {
      console.log(tab, event);
    },

    handleClick(tab, event) {
      // console.log(tab, event);
    },
    back() {
      this.$router.back();
    },

    getPlanInfoList() {
      getPlanInfoListByBindCode(this.bindCode).then((res) => {
        this.planInfoTotal = res.total;
        this.planInfoList = res.rows;
      });
    },

    getBudGetList() {
      listBudget(this.budGetqueryParams).then((res) => {
        this.budgetList = res.rows;
        this.total = res.total;
      });
    },

    getBindDetails() {
      getPlanDetails(this.bindCode).then((res) => {
        this.budgetList = res.data.purProdBudget;
        this.planInfoList = [];
        res.data.purProdBudget.forEach((res) => {
          res.purProdInfos.forEach((item) => {
            this.planInfoList.push(item);
          });
        });
      });
    },
  },
};
</script>

<style>
.bindDetails-box {
  overflow: auto;
}

.el-tabs::v-deep .el-tabs__item.is-active {
  color: #409eff; /* 修改激活时的字体颜色 */
}

.el-select-dropdown .el-select-dropdown__item {
  /* 设置字体颜色为黑色 (#333) */
  color: #409eff; /* 修改激活时的字体颜色 */
  font-weight: bold;
}

.head-box .el-tabs__active-bar {
  background-color: black;
  display: none;
}

.bindDetails-box .el-tabs__active-bar {
  display: none;
}

.first-box {
  background-image: url("../../../image/投标报名.png");
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 68px center;
  font-family: "仿宋";
  font-size: 19px;
  font-weight: bold;
}
.first-box:hover {
  opacity: 0.8;
}

.second-box {
  background-image: url("../../../image/招标.png");
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: 70px center;
  font-family: "仿宋";
  font-size: 19px;
  font-weight: bold;
}
.second-box:hover {
  opacity: 0.8;
}

/* .el-tabs__nav-wrap::after {
    height: 0px;
  } */

.third-box {
  background-image: url("../../../image/D开标组织.png");
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: 73px center;
  font-family: "仿宋";
  font-size: 19px;

  font-weight: bold;
}
.third-box:hover {
  opacity: 0.8;
}

.fourth-box {
  background-image: url("../../../image/评标管理.png");
  background-repeat: no-repeat;
  background-size: 23px 23px;
  background-position: 77px center;
  font-family: "仿宋";
  font-size: 19px;
  font-weight: bold;
}
.fourth-box:hover {
  opacity: 0.8;
}

.five-box {
  background-image: url("../../../image/定标.png");
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 70px center;
  font-family: "仿宋";
  font-size: 19px;
  font-weight: bold;
}
.five-box:hover {
  opacity: 0.8;
}
.header-box {
  height: 30px;
  background-color: #ccc;
  line-height: 30px;
  font-family: "仿宋";
  font-size: 18px;
  font-weight: bold;
  text-indent: 30px;
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

.title {
  width: 90%;
  margin: 0 auto;
}

.headcol {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  background-color: #f2f2f2;
  color: rgb(133, 125, 125);
  text-align: center;
}

.headcols {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border: 1px solid #f3f3f3;
  font-weight: bold;
}

.display-box .el-input input {
  border: none;
  outline: none;
  box-shadow: none;
}
.updateBind .el-input__inner {
  background-color: inherit; /* 继承父级背景色，或设置成你需要的颜色 */
  color: black;
}

.el-radio {
  color: black;
}

.tilte-style {
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
}

.budGetInfos-box {
  width: 1100px;
  margin: 120px auto;
}

.planInfos-box {
  width: 1100px;
  margin: 60px auto;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 20px;
  width: 50%;
}

.submit-box {
  width: 1100px;
  height: 100px;
  margin: 20px auto;
}

.dict-box {
  background-color: inherit; /* 继承父级背景色，或设置成你需要的颜色 */
  font-family: "仿宋";
  font-weight: bold;
  margin-left: 15px;
  font-size: 14px;
}

.el-select-dropdown {
  border: 1px solid #48e3ff;
}

.map-box {
  font-family: "仿宋";
  font-weight: bold;
  font-size: 15px;
  margin-left: 15px;
}
.updateBind {
  overflow: auto;
}
</style>